﻿@{
    ViewBag.Title = "Ajuda";
}

<h4><i class="fa fa-question-circle"></i> Ajuda</h4>

<div class="alert alert-info">Selecione uma das áreas para consultar os respetivos tópicos de ajuda.</div>
<br/>

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
		    <div class="tabbable" id="helpTabs">
		        <!-- TAB LIST -->
		        <ul class="nav nav-tabs" style="margin-bottom: 10px;">
		            <li class="active">
		                <a href="#helpTab1" data-toggle="tab"><i class="fa fa-th"></i> Painel</a>
		            </li>
		            <li>
		                <a href="#helpTab2" data-toggle="tab"><i class="fa fa-folder"></i> Entidades</a>
		            </li>
		            <li>
		                <a href="#helpTab3" data-toggle="tab"><i class="fa fa-file"></i> Eventos</a>
		            </li>
		            <li>
		                <a href="#helpTab4" data-toggle="tab"><i class="fa fa-user"></i> Utilizadores</a>
		            </li>
		            <li>
		                <a href="#helpTab5" data-toggle="tab"><i class="fa fa-pie-chart"></i> Estatísticas</a>
		            </li>
                    <li>
		                <a href="#helpTab6" data-toggle="tab"><i class="fa fa-cog"></i> Parâmetros</a>
		            </li>
		        </ul>

                
		        <!-- TAB CONTENTS -->
                <div class="tab-content" style="min-height: 380px; padding: 10px; border-style: solid; border-color: #c0c0c0; border-width: 1px; border-radius: 5px;">
		            <!-- TAB 1 -->
                    <div class="tab-pane active" id="helpTab1">
                        
                        <div class="accordion" id="accordion-286325">
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-286325" href="#accordion-element-436599">
                                        <b>Opções do Painel</b>
                                    </a>
                                </div>
                                <div id="accordion-element-436599" class="accordion-body collapse in">
                                    <div class="accordion-inner">
                                        Explicação 1 ...
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-group">
                                <div class="accordion-heading">
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-286325" href="#accordion-element-616024">
                                       <b>Menu Informativo</b>
                                    </a>
                                </div>
                                <div id="accordion-element-616024" class="accordion-body collapse">
                                    <div class="accordion-inner">
                                         Explicação 2 ...
                                    </div>
                                </div>
                            </div>
                        </div>  <!-- accordionTab1 -->

                    </div>
		            <!-- TAB 2 -->
                    <div class="tab-pane" id="helpTab2">
                        Tab 2

                    </div>
                    <!-- TAB 3 -->
                    <div class="tab-pane" id="helpTab3">
                        <p>
                            Tab 3
                        </p>
                    </div>
                    <!-- TAB 4 -->
                    <div class="tab-pane" id="helpTab4">
                        <p>
                            Tab 4
                        </p>
                    </div>
                    <!-- TAB 5 -->
                    <div class="tab-pane" id="helpTab5">
                        <p>
                            Tab 5
                        </p>
                    </div>
                    <!-- TAB 6 -->
                    <div class="tab-pane" id="helpTab6">
                        <p>
                            Tab 6
                        </p>
                    </div>
		        </div> <!-- /tab-content -->
		    </div> <!-- /tabtable -->

		</div> <!-- /span12 -->
	</div> <!-- /row-fluid -->
</div> <!-- /container-fluid -->

<script>

    $('#helpTabs a:last').tab('show');
    $('#helpTabs').click()
</script>

@Scripts.Render("~/bundles/jquery") 